<template>
	<view class="layout">
		<uni-nav-bar dark :fixed="true" shadow background-color="#59dce8" status-bar left-icon="left" left-text="返回"
			title="个人中心" @clickLeft="back" />
		<view class="userInfo">
			<view class="avtar">
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			<form>
				<view class="item">
					<view class="text">昵称</view>
					<input type="text" placeholder="Youth-" class="nickname"/>
				</view>
				<view class="item">
					<view class="text">性别</view>
					<radio-group >
						<radio activeBackgroundColor="#59dce8" checked="true" value="1">男</radio>
						<radio activeBackgroundColor="#59dce8" value="0">女</radio>
					</radio-group>
				</view>
			</form>
		</view>
		<button form-type="submit" @click="submit">Submit</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	
	const formData = ref({
		nickname:"",
		gender:1,
		avatar:{}
	})
	
	const submit =()=>{
		console.log(formData.value);
	}
	
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.layout {
		.userInfo {
			.avtar{
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 50rpx;
				image{
					margin: 0 300rpx;
					height: 150rpx;
					width: 150rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
			.item{
				margin: 20rpx 0;
				display: flex;
				padding: 30rpx;
				align-items: center;
				radio-group{
					padding-left: 30rpx;
					radio{
						padding-right: 30rpx;
					}
				}
				.nickname{
					border: 1rpx solid #ccc;	
					margin-left: 30rpx;
					padding-left: 10rpx;
					width: 300rpx;
					height: 50rpx;
				}
			}
		}
		button{
			width: 600rpx;
			border-radius: 15rpx;
			margin-top: 30rpx;
			background: #59dce8;
			opacity: 0.85;
		}
	}
</style>